const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const SW = 500;
const SH = 400;

init();

async function init() {
	ctx.fillStyle = "#1D2125";
	ctx.fillRect(0, 0, SW, SH);
	ctx.lineWidth = 1;
	ctx.moveTo(0, SH * 0.5);
	ctx.lineTo(SW, SH * 0.5);
	ctx.moveTo(SW * 0.5, 0);
	ctx.lineTo(SW * 0.5, SH);

	ctx.strokeStyle = "#f0f0f0";
	ctx.stroke();

	drawSwapPanel(
		ctx,
		{
			title: "Sell",
			time: "10s ago",
			outAmount: "-43454.45554553",
			outSymbol: "(USDT)",
			inAmount: "+12387423",
			inSymbol: "(WETH)",
			up: false
		},
		SW * 0.5,
		SH * 0.5
	);
	drawSwapPanel(
		ctx,
		{
			title: "Buy",
			time: "10s ago",
			// outAmount: "-4453",
			// outSymbol: "(USDT)",
			inAmount: "+127423",
			inSymbol: "(WETH)",
			up: true
		},
		SW * 0.5,
		SH * 0.5
	);
}

//绘制文字对话框
function drawSwapPanel(ctx, obj, sx, sy) {
	ctx.font = "bold 12px Arial";

	let widthMap = {};
	for (let i in obj) {
		let len = ctx.measureText(obj[i]).width;
		widthMap[i] = len;
	}
	
	const COLOR = {
		green: "#0DCB81",
		red: "#F6475D",
		time: "#B1B6C6",
		symbol: "#B1B6C6"
	};

    let lineWidths = [widthMap.title + widthMap.time + 40];
    if(obj.inAmount && obj.inSymbol){
        lineWidths.push(widthMap.inAmount + widthMap.inSymbol);
    }
    if(obj.outAmount && obj.outSymbol){
        lineWidths.push(widthMap.outAmount + widthMap.outSymbol);
    }
    
	let max = Math.max(...lineWidths);

	const offsetY = 12;
	let contentHeight = 20 * lineWidths.length;
	let xPadding = 16;
	let yPadding = 8;
	let width = max + 2 * xPadding; //宽度
	let height = contentHeight + 2 * yPadding; //高度
	let radius = 4; //圆角
	let arrowWidth = 18; //箭头宽度
	let arrowHeight = 12; //箭头高度
	let borderColor = COLOR.red;

	let x = sx - width * 0.5;
	let y = sy - height - arrowHeight;

	if (obj.up) {
		y = sy + arrowHeight;
		borderColor = COLOR.green;
		drawUpFrame(ctx, x, y, width, height, radius, arrowWidth, arrowHeight, borderColor);
	} else {
		drawDownFrame(ctx, x, y, width, height, radius, arrowWidth, arrowHeight, borderColor);
	}

	ctx.textBaseline = "baseline";
	ctx.textAlign = "left";

	ctx.fillStyle = "#ffffff";
	ctx.fillText(obj.title, x + xPadding, y + yPadding + offsetY);

	ctx.fillStyle = COLOR.time;
	ctx.fillText(obj.time, x + width - widthMap.time - xPadding, y + yPadding + offsetY);

	let py = [22, 40];
	let pid = 0;

	if (obj.up) {
		if (obj.inAmount && obj.inSymbol) {
			ctx.fillStyle = COLOR.green;
			ctx.fillText(obj.inAmount, x + xPadding, y + yPadding + py[pid] + offsetY);

			ctx.fillStyle = COLOR.symbol;
			ctx.fillText(obj.inSymbol, x + xPadding + widthMap.inAmount, y + yPadding + py[pid] + offsetY);
			pid++;
		}

		if (obj.outAmount && obj.outSymbol) {
			ctx.fillStyle = COLOR.red;
			ctx.fillText(obj.outAmount, x + xPadding, y + yPadding + py[pid] + offsetY);

			ctx.fillStyle = COLOR.symbol;
			ctx.fillText(obj.outSymbol, x + xPadding + widthMap.outAmount, y + yPadding + py[pid] + offsetY);
		}
	} else {
		if (obj.outAmount && obj.outSymbol) {
			ctx.fillStyle = COLOR.red;
			ctx.fillText(obj.outAmount, x + xPadding, y + yPadding + py[pid] + offsetY);

			ctx.fillStyle = COLOR.symbol;
			ctx.fillText(obj.outSymbol, x + xPadding + widthMap.outAmount, y + yPadding + py[pid] + offsetY);
			pid++;
		}

		if (obj.inAmount && obj.inSymbol) {
			ctx.fillStyle = COLOR.green;
			ctx.fillText(obj.inAmount, x + xPadding, y + yPadding + py[pid] + offsetY);

			ctx.fillStyle = COLOR.symbol;
			ctx.fillText(obj.inSymbol, x + xPadding + widthMap.inAmount, y + yPadding + py[pid] + offsetY);
		}
	}
}

//箭头向下
function drawDownFrame(ctx, x, y, width, height, radius, arrowWidth, arrowHeight, borderColor) {
	ctx.beginPath();
	ctx.strokeStyle = borderColor;

	ctx.moveTo(x + radius, y);
	ctx.lineTo(x + width - radius, y);
	ctx.arcTo(x + width, y, x + width, y + radius, radius);
	ctx.lineTo(x + width, y + height - radius);
	ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);

	ctx.lineTo(x + width / 2 + arrowWidth / 2, y + height);
	ctx.lineTo(x + width / 2 + arrowWidth * 0.25, y + height + arrowHeight * 0.5);
	ctx.quadraticCurveTo(x + width / 2, y + height + arrowHeight, x + width / 2 - arrowWidth * 0.25, y + height + arrowHeight * 0.5);
	ctx.lineTo(x + width / 2 - arrowWidth / 2, y + height);
	ctx.lineTo(x + radius, y + height);
	ctx.arcTo(x, y + height, x, y + height - radius, radius);
	ctx.lineTo(x, y + radius);
	ctx.arcTo(x, y, x + radius, y, radius);

	ctx.lineWidth = 2;
	ctx.fillStyle = "rgba(0,0,0,0.8)";
	ctx.stroke();
	ctx.fill();
}

//箭头向上
function drawUpFrame(ctx, x, y, width, height, radius, arrowWidth, arrowHeight, borderColor) {
	ctx.beginPath();
	ctx.strokeStyle = borderColor;
	ctx.moveTo(x + radius, y);
	ctx.lineTo(x + width / 2 - arrowWidth / 2, y);
	ctx.lineTo(x + width / 2 - arrowWidth * 0.25, y - arrowHeight * 0.5);
	ctx.quadraticCurveTo(x + width / 2, y - arrowHeight, x + width / 2 + arrowWidth * 0.25, y - arrowHeight * 0.5);

	ctx.lineTo(x + width / 2 + arrowWidth / 2, y);
	ctx.lineTo(x + width - arrowWidth, y);
	ctx.arcTo(x + width, y, x + width, y + radius, radius);

	ctx.lineTo(x + width, y + radius);

	ctx.lineTo(x + width, y + height - radius);

	ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);

	ctx.lineTo(x + radius, y + height);
	ctx.arcTo(x, y + height, x, y + height - radius, radius);

	ctx.lineTo(x, y + radius);
	ctx.arcTo(x, y, x + radius, y, radius);
	ctx.lineTo(x + radius, y);

	ctx.lineWidth = 2;
	ctx.fillStyle = "rgba(0,0,0,0.8)";
	ctx.stroke();
	ctx.fill();
}
